<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>状态机</title>
  </head>
  <body>
    <script>
      const machine = {
        currentState: "login form",
        states: {
          "login form": {
            submit: "loading"
          },
          loading: {
            success: "profile",
            failure: "error"
          },
          profile: {
            viewProfile: "profile",
            logout: "login form"
          },
          error: {
            tryAgain: "loading"
          }
        }
      };
      const input = function(name) {
        const state = machine.currentState;

        if (machine.states[state][name]) {
          machine.currentState = machine.states[state][name];
        }
        console.log(`${state} + ${name} --> ${machine.currentState}`);
      };
      input("loading");
      input("tryAgain");
      // login form + tryAgain --> login form

      input("submit");
      // login form + submit --> loading

      input("submit");
      // loading + submit --> loading

      input("failure");
      // loading + failure --> error

      input("submit");
      // error + submit --> error

      input("tryAgain");
      // error + tryAgain --> loading

      input("success");
      // loading + success --> profile

      input("viewProfile");
      // profile + viewProfile --> profile

      input("logout");
      // profile + logout --> login form
    </script>
  </body>
</html>
